<script lang="ts">
    export let className = "";
    export let eventTarget: EventTarget;
    function dispatchCustomEvent(data: string) {
        const customEvent = new CustomEvent<string>("CustomEvent", {
            detail: data,
        });
        eventTarget?.dispatchEvent(customEvent);
    }
</script>

<div
    class="w-full bottom-0 absolute {className} bg-secondary text-secondary-content"
>
    <div class="flex justify-between items-end px-4 py-2">
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button
            class="text-white flex justify-center items-center"
            on:click={() => dispatchCustomEvent("/")}
        >
            <svg
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                ><path
                    fill="#d9d9d9"
                    d="M101.802667 435.626667l384-298.666667a42.666667 42.666667 0 0 1 52.394666 0l384 298.666667a42.666667 42.666667 0 0 1 16.469334 33.578666V469.333333a42.666667 42.666667 0 0 1-41.813334 42.666667H896a42.666667 42.666667 0 0 1-26.197333-8.96L512 224.682667l-357.802667 278.272a42.666667 42.666667 0 0 1-24.874666 8.96L128 512a42.666667 42.666667 0 0 1-42.666667-41.386667V469.333333a42.666667 42.666667 0 0 1 16.469334-33.706666z"
                ></path><path
                    fill="#d9d9d9"
                    d="M896 682.666667v-213.333334a42.666667 42.666667 0 1 0-85.333333 0v213.333334q0 53.034667-37.504 90.496Q735.701333 810.666667 682.666667 810.666667v-170.666667a85.333333 85.333333 0 0 0-85.333334-85.333333h-170.666666a85.333333 85.333333 0 0 0-85.333334 85.333333v170.666667q-53.034667 0-90.496-37.504Q213.333333 735.701333 213.333333 682.666667v-213.333334a42.666667 42.666667 0 0 0-85.333333 0v213.333334q0 88.362667 62.464 150.869333Q253.013333 896 341.333333 896h341.333334q88.362667 0 150.826666-62.464Q896 770.986667 896 682.666667z m-469.333333 128h170.666666v-170.666667h-170.666666v170.666667z"
                ></path></svg
            >
        </button>
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button
            class="flex justify-center items-center"
            on:click={() => dispatchCustomEvent("/time")}
        >
            <svg
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                ><path
                    fill="#d9d9d9"
                    d="M469.333333 341.333333a42.666667 42.666667 0 1 1 85.333334 0v170.666667l138.368 138.368a42.666667 42.666667 0 0 1-60.373334 60.330667l-150.826666-150.869334a42.666667 42.666667 0 0 1-11.562667-38.997333A42.837333 42.837333 0 0 1 469.333333 512V341.333333z"
                ></path><path
                    fill="#d9d9d9"
                    d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m0-682.666667a298.666667 298.666667 0 1 1 0 597.333334 298.666667 298.666667 0 0 1 0-597.333334z"
                ></path></svg
            >
        </button>
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button
            class="text-white flex justify-center items-center bg-accent rounded-full"
            on:click={() => dispatchCustomEvent("add")}
        >
            <svg
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="48"
                height="32"
                ><path
                    fill="#d9d9d9"
                    d="M883.2 560.8H140.8c-26.9 0-48.8-22-48.8-48.8 0-26.9 22-48.8 48.8-48.8h742.3c26.9 0 48.8 22 48.8 48.8 0.1 26.9-21.9 48.8-48.7 48.8z"
                ></path><path
                    fill="#d9d9d9"
                    d="M463.2 883.2V140.8c0-26.9 22-48.8 48.8-48.8 26.9 0 48.8 22 48.8 48.8v742.3c0 26.9-22 48.8-48.8 48.8-26.9 0.1-48.8-21.9-48.8-48.7z"
                ></path></svg
            >
        </button>
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button
            class="text-white flex justify-center items-center"
            on:click={() => dispatchCustomEvent("/analysis")}
        >
            <svg
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                ><path
                    fill="#d9d9d9"
                    d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v469.333333q0 88.362667 62.464 150.826667Q253.013333 853.333333 341.333333 853.333333h512a42.666667 42.666667 0 1 0 0-85.333333H341.333333q-53.034667 0-90.496-37.504Q213.333333 693.034667 213.333333 640V170.666667a42.666667 42.666667 0 0 0-42.666666-42.666667z"
                ></path><path
                    fill="#d9d9d9"
                    d="M471.04 399.957333l-142.208 142.208a42.666667 42.666667 0 1 1-60.330667-60.330666l170.666667-170.666667a42.666667 42.666667 0 0 1 58.496-1.706667l161.962667 143.914667 142.208-142.208a42.666667 42.666667 0 1 1 60.330666 60.330667l-170.666666 170.666666a42.666667 42.666667 0 0 1-58.496 1.706667L471.04 399.957333z"
                ></path></svg
            >
        </button>
        <!-- svelte-ignore a11y_consider_explicit_label -->
        <button
            class="text-white flex justify-center items-center"
            on:click={() => dispatchCustomEvent("/setting")}
        >
            <svg
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                ><path
                    fill="#d9d9d9"
                    d="M249.898667 215.850667l-118.528 213.333333a170.666667 170.666667 0 0 0 0 165.717333l118.528 213.333334A170.666667 170.666667 0 0 0 399.061333 896h225.792a170.666667 170.666667 0 0 0 149.205334-87.765333l118.485333-213.333334a170.666667 170.666667 0 0 0 0-165.76l-118.485333-213.333333a170.666667 170.666667 0 0 0-149.205334-87.722667H399.061333a170.666667 170.666667 0 0 0-149.162666 87.765334z m74.581333 550.954666l-118.528-213.333333q-23.04-41.429333 0-82.858667l118.528-213.333333q24.362667-43.904 74.581333-43.904h225.792q50.218667 0 74.581334 43.946667l118.528 213.290666q23.04 41.386667 0 82.858667l-118.528 213.333333Q675.072 810.666667 624.853333 810.666667H399.061333q-50.218667 0-74.581333-43.861334z"
                ></path><path
                    fill="#d9d9d9"
                    d="M682.666667 512a170.666667 170.666667 0 1 1-341.333334 0 170.666667 170.666667 0 0 1 341.333334 0z m-85.333334 0q0-35.328-25.002666-60.330667T512 426.666667q-35.328 0-60.330667 25.002666T426.666667 512q0 35.328 25.002666 60.330667T512 597.333333q35.328 0 60.330667-25.002666T597.333333 512z"
                ></path></svg
            >
        </button>
    </div>
</div>
